<template>
  <div class="order-product" ref="order_product">
    <div class="product-img-group" ref="order_product_content">
      <div class="item-img" v-for="item in orderdata.relation_order_product" ref="product_item">
        <img :src="'http://www.yhsh.com/'+item.product_thumb" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: ['orderdata'],
  data() {
    return {}
  },
  created() {
    // console.log(this.orderdata)
    // this._initOrderScroll()
  },
  mounted() {
    this._initOrderScroll()
  },
  methods: {
    _initOrderScroll() {
      let width = 0
      for (let i = 0; i < this.orderdata.relation_order_product.length; i++) {
        width += this.$refs.product_item[0].getBoundingClientRect().width
      }
      width += (this.orderdata.relation_order_product.length - 1) * 6
      this.$refs.order_product_content.style.width = width + 'px'
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.order_product, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-product {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  .product-img-group {
    display: flex;
    justify-content: flex-start;
    height: 60px;
    .item-img {
      display: inline-block;
      font-size: 0;
      width: 60px;
      height: 60px;
      box-sizing: border-box;
      border-radius: 4px;
      border: 1px solid #e6e6e6;
      text-align: center;
      margin-right: 6px;
      display: inline-block;
      img {
        width: 54px;
        height: 54px;
        margin-top: 2px;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
